<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-shoppingProduct-edit" th:object="${shoppingProduct}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<input id="img" name="img" th:field="*{img}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-3 control-label">商品名称：</label>
				<div class="col-sm-8">
					<input id="productName" name="productName" th:field="*{productName}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">商品轮播：</label>
				<div class="col-sm-8">
					<input type="file" id="picture1"  name="fileImg"  accept="image/png,image/jpeg"/>
				</div>
			</div>
			<div class="form-group" >
				<label class="col-sm-3 control-label"></label>
				<div class="col-sm-8" id="imgBox">
				</div>
			</div>

			<div class="form-group">	
				<label class="col-sm-3 control-label">价格：</label>
				<div class="col-sm-8">
					<input id="price" name="price" th:field="*{price}" class="form-control" type="number">
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-3 control-label">启用状态：</label>
				<div class="col-sm-8">
					<div class="radio-box" th:each="dict : ${@dict.getType('sys_product_status')}">
						<input type="radio" th:id="${dict.dictCode}" name="stutas" id="stutas" th:value="${dict.dictValue}"
							   th:checked="${dict.isDefault == 'Y' ? true : false}"  th:field="*{stutas}">
						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">是否线上商品：</label>
				<div class="col-sm-8">
					<div class="radio-box" th:each="dict : ${@dict.getType('acq_binding_type')}">
						<input type="radio" th:id="${dict.dictCode}" name="type" id="type" th:value="${dict.dictValue}" th:field="*{type}">
						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">显示积分：</label>
				<div class="col-sm-8">
					<input id="showScore" name="showScore" th:field="*{showScore}" class="form-control" type="number">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">商品描述：</label>
				<div class="col-sm-8">
					<script id="editor"name="remarks"   type="text/plain" style="width:1024px;height:500px;">
						<div th:utext ="${shoppingProduct.remarks}"></div>
					</script>
					</div>
					</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">创建时间：</label>
				<div class="col-sm-8">
					<input id="createTime" name="createTime"  th:value="${#dates.format(shoppingProduct.createTime,'yyyy-MM-dd HH:mm:ss')}"  class="form-control" type="text" disabled="disabled">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">创建人：</label>
				<div class="col-sm-8">
					<input id="createName" name="createName" th:field="*{createName}" class="form-control" type="text" disabled="disabled">
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
	<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.js}"> </script>
	<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>

	<script type="text/javascript">
		//实例化编辑器
		//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
		var ue = UE.getEditor('editor');
		var imgSrc = []; //图片路径
		var imgFile = []; //文件流
		var imgName = []; //图片名字
		var prefix = ctx + "system/shoppingProduct"
		$("#form-shoppingProduct-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		//初始化 加载显示图片 imgBox img

		$(function() {
			var img=$("#img").val()
			var arr = img.split(';');
			if(img!=null&&img!=""){
				$("#imgBox").html("");

				for(var a = 0; a < arr.length; a++) {
					imgSrc.push(arr[a]);
					var oldBox = $("#imgBox").html();
					$("#imgBox").html(oldBox + '<div class="imgContainer"><img  width="100" height="100" title=' + arr[a] + ' alt=' + arr[a] + ' src=' + arr[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete"><a>删除</a></p></div>');
				}

			}
		});



		function submitHandler() {
			if ($.validate.form()) {
				var formdata = new FormData();
				var arr = [];
				arr.push(UE.getEditor('editor').getContent());
				formdata.append("productName", $("#productName").val());
				formdata.append("id", $("#id").val());
				formdata.append("price", $("#price").val());
				formdata.append("freight", $("#freight").val());
				formdata.append("showScore", $("#showScore").val());
				formdata.append("remarks", arr.join("\n"));
                formdata.append("type",$("input[name='type']:checked").val());
				formdata.append("stutas",$("input[name='stutas']:checked").val());
				for(var i=0;i<imgFile.length;i++){
					formdata.append('fileImg',imgFile[i]);
				}
				$.ajax({
					url: prefix + "/edit",
					data: formdata,
					type: "post",
					timeout : 20000, //超时时间设置，单位毫秒
					processData: false,
					contentType: false,
					success: function(result) {
						$.operate.saveSuccess(result);
					},
					complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
						if(status=='timeout'){//超时,status还有success,error等值的情况
							$.modal.alertError("请求已超时，请稍后再试！");
							$.modal.close();
						}
					}
				})
			}
		}


		//图片预览路径

		function getObjectURL(file) {
			var url = null;
			if(window.createObjectURL != undefined) { // basic
				url = window.createObjectURL(file);
			} else if(window.URL != undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if(window.webkitURL != undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			return url;

		}



		//选择图片
		$("#picture1").on("change", function() {
			var imgBox = '#imgBox'
			var fileImg = $("#picture1")[0];
			var fileList = fileImg.files;
			for(var i = 0; i < fileList.length; i++) {
				var imgSrcI = getObjectURL(fileList[i]);
				imgName.push(fileList[i].name);
				imgSrc.push(imgSrcI);
				imgFile.push(fileList[i]);
			}
			addNewContent(imgBox);
		})


		//图片展示
		function addNewContent(obj) {
			$("#imgBox").html("");
			for(var a = 0; a < imgSrc.length; a++) {
				var oldBox = $("#imgBox").html();
				$("#imgBox").html(oldBox + '<div class="imgContainer"><img width="100" height="100" title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete"><a>删除</a></p></div>');
			}
		}
		//删除
		function removeImg(obj, index) {
			imgSrc.splice(index, 1);
			imgFile.splice(index, 1);
			imgName.splice(index, 1);
			console.log(imgSrc.length)
			var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
			console.log("删除"+imgSrc.length)
			addNewContent(boxId);
		}

		//图片灯箱
		function imgDisplay(obj) {
			var src = $(obj).attr("src");
			var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
			$('body').append(imgHtml);
		}
		//关闭
		function closePicture(obj) {
			$(obj).parent("div").remove();
		}
		//图片预览路径
		function getObjectURL(file) {
			var url = null;
			if(window.createObjectURL != undefined) { // basic
				url = window.createObjectURL(file);
			} else if(window.URL != undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if(window.webkitURL != undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		}
	</script>
</body>
</html>
